/*
 * @Author: KAZU kazu_zhang@163.com
 * @Date: 2023-02-14 22:12:39
 * @LastEditors: KAZU kazu_zhang@163.com
 * @LastEditTime: 2023-02-16 19:02:45
 * @FilePath: \blog-front-frontend\src\components\blog\Blog.jsx
 * @Description: 博客页面
 */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState } from "react";
import Modal from "react-modal";
import ModalBase from "../ModalBase";

Modal.setAppElement("#root");

const Blog = () => {
  const [isOpen, setIsOpen] = useState(false);

  function toggleModal() {
    setIsOpen(!isOpen);
  }

  const data = [
    {
      id: 1,
      imgCover: '01.jpg',
      category: '大学生活',
      title: '我的大学生活(1)'
    },
    {
      id: 2,
      imgCover: '02.jpg',
      category: '大学生活',
      title: '我的大学生活(2)'
    },
    {
      id: 3,
      imgCover: '03.jpg',
      category: '大学生活',
      title: '我的大学生活(3)'
    },
    {
      id: 4,
      imgCover: '01.jpg',
      category: '大学生活',
      title: '我的大学生活(4)'
    },
    {
      id: 5,
      imgCover: '02.jpg',
      category: '大学生活',
      title: '我的大学生活(5)'
    },
  ]

  return (
    <>
      <div className="news_list">
        <ul>
          {
            data.map(item => {
              return (
                <li
                  data-aos="fade-right"
                  data-aos-duration="1200"
                  data-aos-delay={(item.id % 3) * 150}
                >
                  <div className="list_inner">
                    <div className="image" onClick={toggleModal}>
                      <img src={`img/blog/background/${item.imgCover}`} alt="thumb" />
                      <div
                        className="main"
                        style={{
                          backgroundImage: `url(${process.env.PUBLIC_URL + `img/blog/background/${item.imgCover}`
                            })`,
                        }}
                      ></div>
                    </div>
                    {/* End image */}

                    <div className="details">
                      <span className="category">
                        <a href="#">{item.category}</a>
                      </span>
                      <h3 className="title" onClick={toggleModal}>
                        {item.title}
                      </h3>
                    </div>
                    {/* End details */}
                  </div>
                </li>
              )
            })}
        </ul>

        {/* Start Modal One */}
        <Modal
          isOpen={isOpen}
          onRequestClose={toggleModal}
          contentLabel="My dialog"
          className="custom-modal"
          overlayClassName="custom-overlay"
          closeTimeoutMS={500}
        >
          <div className="know_tm_modalbox">
            <button className="close-modal" onClick={toggleModal}>
              <img src="/img/svg/cancel.svg" alt="close icon" />
            </button>
            {/* End close icon */}

            <div className="box_inner">
              <ModalBase url={`${process.env.PUBLIC_URL + `md/day01/day01.md`}`} />
            </div>
            {/* End box inner */}
          </div>
          {/* End modal box news */}
        </Modal>
        {/* End modal One */}

      </div>
    </>
  );
};

export default Blog;
